<script setup>

import {onBeforeUnmount, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {get} from "../../util/request.js";

const num = ref(5)
const onClickLeft = () => {
  history.back()
}//导航栏返回上一个页面

const router=useRouter();
const tick = () => {
  num.value--;
  console.log('当前计数:', num.value);
  if (num.value === 0){
    clearInterval(intervalId)
    router.push("/index");
  }
};

let intervalId = null;
// 使用 onMounted 钩子开始定时执行
onMounted(() => {
  // 设置定时器，每1000毫秒（即1秒）执行一次tick函数
  intervalId = setInterval(tick, 1000);
  // 可以将intervalId保存在组件的数据或引用中，以便在适当的时候清除定时器
});

// 使用 onBeforeUnmount 钩子清理定时器，防止内存泄漏
onBeforeUnmount(() => {
  clearInterval(intervalId); // 确保intervalId在此处可用
});
</script>

<template>
  <div style="width: 100vw;height: 100vh">
    <van-nav-bar
        title="举报"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        style="
        width: 100vw;
     "
    />

    <div style="position:relative;">
      <div style="position: relative;margin-top:50px;left:5%;width:90% ;height: 300px; ;background-color: rgb(255,255,255); box-shadow: 0 0 5px rgba(0,0,0,0.3);">
        <van-icon name="sign" size="100px" color="#AFBAC2" style="margin-top: 10%"/>
        <p style="color: #AFBAC2">您的举报已提交成功，我们会尽快进行核实！</p>
        <van-button @click="$router.push('/index')" style="position: absolute;bottom: 10px;width:80%;left: 10%;right: 10%" type="primary" block>返回首页（{{num}}）</van-button>
      </div>
    </div>


  </div>
</template>

<style scoped>

</style>